<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>红绿灯</title>
    <link rel="stylesheet" href="demo2.css">
</head>
<body>
<!--    <div>-->
<!--        <div>-->
<!--            <div></div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div>-->
<!--        <div>-->
<!--            <div></div>-->
<!--        </div>-->
<!--    </div>-->

<!--    <span>目标在此</span>-->
    <div class="container">
        <div class="红绿灯 红灯"></div>
        <div class="红绿灯 黄灯"></div>
        <div class="红绿灯 绿灯"></div>
    </div>
    <div>现在是 <span></span> 灯在亮。</div>



    <!-- 把 <script> 放在最下面 -->
    <!-- 因为 <script> 一旦加载完成就会运行，可能下面的标签还来得及加载，导致加载不到 -->
    <!-- <script> 永远是  body 的最后一个元素 -->
    <!-- 如果有多个 <script> 标签，一般建议按照依赖顺序进行放置  -->
    <script src="demo2.js"></script>
</body>
</html>